
<template>
  <!-- 步骤包含一张图片 下面有一行文字（名字） -->
  <!-- hover 时展示便捷菜单 -->
  <!-- 右键又是菜单 -->
  <div class="vetl-editor-step" :style="{left: position.left + 'px', top: position.top + 'px'}" draggable="true" 
    @dragstart="dragstart" @mousemove="showSimpleMenu" @mouseout="hideSimpleMenu">
    <img class="step-icon" src="../../../assets/logo.png"/>
    <div><p>{{name}}</p></div>
    <div class="simple-menu">
      <div class="config">配置</div>
      <div class="out-config">输出配置</div>
    </div>
  </div>
</template> 

<script>
export default {
  name: "step",
  props: ['name', 'position'],
  data() {
    return {
        
    };
  },
  methods: {
    dragstart(event) {
      event.dataTransfer.setData("opration", "move");
      event.dataTransfer.setData("name", this.name);
    },
    showSimpleMenu(event){
      var menu = event.currentTarget.querySelector(".simple-menu");
      menu.style.display = 'block';
    },
    hideSimpleMenu(event){
      var menu = event.currentTarget.querySelector(".simple-menu");
      menu.style.display = 'none';
    }
  },
  created(){
    console.log("创建了一个步骤");
  }
};
</script>

<style>
.vetl-editor-step {
  position: absolute;
  width: 50px;
  height: 80px;
}
.step-icon{
  width: 50px;
  height: 50px;
}
.simple-menu{
  display: none;
  position: absolute;
  bottom: 0px;
  z-index: 5;
}
</style>